import React, { Component, Fragment } from 'react';
import {
    Spin,
    Button,
    Card,
    Input,
    Table,
    Divider,
    Form,
    Select,
    Row,
    Col,
    Badge,
    Tag,
    Popconfirm,
    message,
    Modal,
    Icon,
} from 'antd';
const { TextArea } = Input;

@Form.create()
export default class MenuModal extends Component {

    state = {
        loading: false,
        isEdit: false,
        menuId: '',
        visible: false,
        formValue: {

        },
    }

    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }

    getMenuById = (menuId) => {
        this.setState({ loading: true, visible: true });
        request(`/api/sys/menu/queryById?${stringify({ menuId })}`)
            .then((root) => {
                if (root.success) {
                    this.setState({
                        isEdit: true,
                        menuId,
                        formValue: root.data,
                        loading: false,
                    });
                    return;
                }
                message.error(root.msg);
                this.setState({ loading: false });
            })
    }

    newMenu = () => {
        this.setState({ loading: false, visible: true, menuId: '', isEdit: false });
    }

    saveMenu = (e) => {
        const { form: { validateFieldsAndScroll }, dispatch, } = this.props;

        validateFieldsAndScroll((error, values) => {
            console.log(values);
            if (!error) {
                this.setState({ loading: true });
                setTimeout(() => {
                    this.setState({ loading: false });
                }, 1000);
            }
        });
    }

    render() {

        const { visible, isEdit, menuId, handleCancel, handleOk, loading, formValue } = this.state
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = null;

        return (
            <Modal
                title={isEdit ? "编辑菜单" : "新建菜单"}
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}            >
                <Spin spinning={loading} delay={50}>
                    <Form layout="vertical">
                        <Row gutter={16}>
                            <Col lg={6} md={12} sm={24}>
                                <Form.Item label='所属平台' {...formItemLayout}>
                                    {
                                        getFieldDecorator('sysId', {
                                            initialValue: formValue.sysId,
                                            rules: [{ required: true, message: "所属平台必填" }],
                                        })
                                            (<Input />)
                                    }
                                </Form.Item>
                            </Col>
                            <Col lg={6} md={12} sm={24}>
                                <Form.Item label='上级菜单' {...formItemLayout}>
                                    {
                                        getFieldDecorator('treeUp', {
                                            initialValue: formValue.treeUp,
                                        })
                                            (<Input />)
                                    }
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col lg={6} md={12} sm={24}>
                                <Form.Item label='菜单名称' {...formItemLayout}>
                                    {
                                        getFieldDecorator('menuName', {
                                            initialValue: formValue.menuName,
                                            rules: [{ required: true, message: "菜单名称必填" }],
                                        })
                                            (<Input />)
                                    }
                                </Form.Item>
                            </Col>
                            <Col lg={6} md={12} sm={24}>
                                <Form.Item label='图标' {...formItemLayout}>
                                    {
                                        getFieldDecorator('menuIcon', {
                                            initialValue: formValue.menuIcon,
                                            rules: [],
                                        })(
                                            <Select >
                                                <Option value="">无</Option>
                                                <Option value="fa fa-desktop">桌面</Option>
                                                <Option value="fa fa-file-o">文件</Option>
                                                <Option value="fa fa-wpforms">日历</Option>
                                                <Option value="fa fa-th-list">一级菜单</Option>
                                                <Option value="fa fa-list-ul">二级菜单</Option>
                                                <Option value="fa fa-bars">列表</Option>
                                                <Option value="fa fa-search">搜索</Option>
                                                <Option value="fa fa-database">数据库</Option>
                                                <Option value="fa fa-history">历史</Option>
                                                <Option value="fa fa-globe">地球</Option>
                                                <Option value="fa fa-flag">旗帜</Option>
                                                <Option value="fa fa-filter">漏斗</Option>
                                                <Option value="fa fa-envelope">信封</Option>
                                                <Option value="fa fa-diamond">钻石</Option>
                                                <Option value="fa fa-cubes">立方体</Option>
                                                <Option value="fa fa-coffee">咖啡</Option>
                                                <Option value="fa fa-cogs">齿轮组</Option>
                                                <Option value="fa fa-cog">齿轮</Option>
                                                <Option value="fa fa-cart-plus">购物车</Option>
                                                <Option value="fa fa-bell">铃铛</Option>
                                                <Option value="fa fa-barcode">长形码</Option>
                                                <Option value="fa fa-university">大学</Option>
                                                <Option value="fa fa-balance-scale">天秤</Option>
                                                <Option value="fa fa-asterisk">雪花</Option>
                                                <Option value="fa fa-podcast">广播</Option>
                                                <Option value="fa fa-truck">卡车</Option>
                                                <Option value="fa fa-shopping-basket">购物栏</Option>
                                                <Option value="fa fa-plug">插头</Option>
                                                <Option value="fa fa-pie-chart">饼图</Option>
                                                <Option value="fa fa-magnet">磁铁</Option>
                                                <Option value="fa fa-user-circle">用户</Option>
                                                <Option value="fa fa-users">用户组</Option>
                                            </Select>)
                                    }
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col lg={24} md={24} sm={24}>
                                <Form.Item label='功能URL' {...formItemLayout}>
                                    {
                                        getFieldDecorator('menuUrl', {
                                            initialValue: formValue.menuUrl,
                                        })
                                            (<Input />)
                                    }
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col lg={24} md={24} sm={24}>
                                <Form.Item label='备注' {...formItemLayout}>
                                    {
                                        getFieldDecorator('remark', {
                                            initialValue: formValue.remark,
                                        })
                                            (<TextArea rows={4} />)
                                    }
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Spin>
            </Modal>
        )
    }
}